<template>
<div class="guide-box">
  <div class="title">
    <p>请放心，交给我们，认真填写下面的信息，我们可以对您的情况进行全面分析，然后为您推荐出最合适的理财产品</p>
  </div>
  <div class="content">
    <div class="step">
      <el-steps :active="active" finish-status="success">
        <el-step v-for="(item,index) in guid.length" :title="'步骤'+ (index + 1) "></el-step>
      </el-steps>
    </div>
    <div class="form">
     
      <div v-if="active !== this.guid.length" class="form-select">
        <template v-for="(item,index) in guid">
          <p v-if="active === (index)"> {{item.question}}</p>
          <el-select  v-if="active === (index)" style="margin-right: 50px;margin-left: 20px"  v-model="item.selected" placeholder="请选择">
            <el-option  :label="item.opt1" :value="item.opt1"/>
            <el-option  :label="item.opt2" :value="item.opt2"/>
            <el-option  :label="item.opt3" :value="item.opt3"/>
            <el-option  :label="item.opt4" :value="item.opt4"/>
          </el-select>
        </template>
        <el-button v-if="active !==guid.length" @click="next()" type="primary">下一步</el-button>
      </div>
     <div v-if="this.active === this.guid.length" v-loading="loading" class="plan">
       <el-table border   :data="plan">
         <el-table-column width="250px" prop="productName" label="产品名称"></el-table-column>
         <el-table-column width="250px" prop="year" label="投资年限"></el-table-column>
         <el-table-column width="250px" prop="amount" label="投资金额"></el-table-column>
       </el-table>
     </div>
    </div>
  </div>
</div>
</template>

<script>
import axios from "axios";

export default {
  name: "Guide",
  data(){
    return{
      loading:false,
      active: 0,
      guid:[
        {id: '1',question: '下列产品中您更倾向于哪一种投资产品？',opt1:'高收益型/稳健型',opt2:'IOF/ETF',opt3:'混合型/保本型',opt4:'定投型/短期性',selected: ''},
        {id: '2',question: '您希望投资多长时间？',opt1:'1年',opt2:'2年',opt3:'3年',opt4:'4年',selected: ''},
        {id: '3',question: '您希望投入多少资金？',opt1:'小于5000',opt2:'小于10000',opt3:'小于15000',opt4:'大于15000',selected: ''},
        {id: '4',question: '您当前的月薪多少？',opt1:'小于5000',opt2:'小于10000',opt3:'大于10000',opt4:'保密',selected: ''},
      ],
      plan:[
      
      ],
      form:{},
    }
  },
  watch:{
    active(newValue){
      if (newValue === this.guid.length){
        this.loading = true
        axios.post('/FinancialRecommend/product/recommend',this.guid)
        .then(response => {
          this.plan = response.data.data
        })
        
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.$message.success('分析完成！')
        },500)
      }
    }
  },
  methods: {
    next(){
      if (this.guid[this.active]['selected'] === ''){
        this.$message({
          type:"warning",
          message:'选项不能为空'
        })
      }else if (this.active !== this.guid.length ){
        this.active +=  1
      }
    }
  }
}
</script>

<style lang="less"  scoped>
.guide-box{
  width: 90%;
  min-height: 555px;
  margin: 0 auto;
  padding-top: 70px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  //display: flex;
}
.step{
  height: 500px;
  width: 100%;
  //background-color: skyblue;
}
.title{
  //height: 500px;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 100px;
  text-align: center;
  //background-color: red;
  p{
    font-size: 25px;
    font-family: "钉钉进步体 Regular";
  }
}
.step{
  width: 800px;
  height: 100px;
  margin: 0 auto;
}
.form{
  width: 50%;
  height: 200px;
  margin: 0 auto;
  //display: flex;
  //background-color: green;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.form-select{
  width: 500px;
  height: 100px;
  p{
    font-family: "钉钉进步体 Regular";
    font-size: 22px;
    font-weight: lighter;
    margin-bottom: 50px;
  }
}
.plan{

}
</style>
